<template>
  <div class="white">
    <div class="lg:gap-10 flex flex-col gap-5 mx-auto max-w-7xl">
      <!-- 面包屑-->
      <!-- 面包屑-->
      <!-- 面包屑-->
      <div class="lg:px-0 flex justify-between p-4">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: localePath('/') }">
            <div class="flex items-center">
              <i class="el-icon-s-home mr-1 text-lg"></i>
            </div>
          </el-breadcrumb-item>
          <el-breadcrumb-item> {{ $t('pages.pointcardlist') }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="lg:hidden">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 cursor-pointer" @click="showDialog = true">
            <path
              fill-rule="evenodd"
              d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </div>
      <!--  -->
      <!--  -->
      <!--  -->
      <div class="lg:px-0 grid grid-cols-4 gap-12 px-4">
        <div class="lg:flex hidden flex-col col-span-1 gap-4">
          <!-- 点卡平台 -->
          <!-- 点卡平台 -->
          <!-- 点卡平台 -->
          <LazyClassifyCard :showActive="false" :classify="classify" @targetClassify="changeTab" />
        </div>
        <div class="lg:col-span-3 flex flex-col col-span-4 gap-4">
          <!-- 推荐点卡 -->
          <!-- 推荐点卡 -->
          <!-- 推荐点卡 -->
          <template v-if="page == 1">
            <h1 class="font-medium text-[1.25rem] text-[#121212] capitalize">
              {{ $t('pages.recommendCard') }}
              <!-- //hotCard -->
              <!-- recommendCard -->
            </h1>
            <div class="max-sm:grid-cols-1 grid grid-cols-2 gap-6">
              <nuxt-link
                class="aspect-[23/9] max-sm:[21/7] w-full pt-6 max-sm:pt-4 relative cursor-pointer rounded-[1rem]"
                v-for="(i, key) in recommendedlist"
                :key="key"
                :to="localePath(`/product/${i.code}`)"
              >
                <div class="size-full max-sm:pt-4 flex items-center gap-4 pt-6 overflow-hidden rounded-[1rem] border z-10">
                  <!-- <div
                  class="size-full rounded-[1rem] bg-black/40 p-4 flex items-center gap-4"
                ></div> -->
                  <div
                    style="transform: scale(2)"
                    class="size-full bg-cover blur-2xl"
                    :style="'background: url(' + $globalFn.imgPrefixUrl(i.image) + ')'"
                  ></div>
                </div>
                <div class="size-full lg:pt-6 absolute inset-0 z-20 pt-4">
                  <img
                    src="https://cd.sealmg.com/assets/img/touming.png"
                    class="size-full object-cover"
                    alt="Transparent background"
                    title="Background overlay"
                    loading="lazy"
                  />
                </div>
                <div class="size-full lg:pt-6 absolute inset-0 z-40 pt-4">
                  <div class="lg:pt-6 size-full pt-4">
                    <div class="size-full bg-black/20 rounded-[1rem]"></div>
                  </div>
                </div>
                <div class="size-full flex absolute top-0 z-50 gap-4 px-4 pb-4">
                  <div
                    class="border border-white/30 border-solid h-full aspect-[6/8] relative shadow-[0rem_0.25rem_0.5rem_0rem_rgba(0,0,0,0.2)] rounded-[0.75rem] overflow-hidden"
                  >
                    <img
                      :src="$globalFn.imgPrefixUrl(i.image || '', 'goods_thumb_3_4')"
                      :alt="i.goods_name || 'Card product'"
                      :title="i.goods_name || 'Card details'"
                      class="size-full object-cover"
                    />
                    <img src="~/assets/img/bg-white.png" class="absolute top-4 inset-1/3 z-50 w-1/3 h-auto" alt="" />
                  </div>
                  <div class="lg:pt-16 flex flex-col gap-2 pt-10">
                    <h3 class="font-medium text-[0.88rem] text-white line-clamp-1">
                      {{ i.goods_name || '' }}
                    </h3>
                    <div class="font-normal text-[0.75rem] text-[rgba(255,255,255,0.7)] line-clamp-1">
                      {{ i.sku && i?.sku[0]?.title }}
                    </div>
                    <div class="font-normal text-[0.75rem] text-[rgba(255,255,255,0.7)]">
                      {{ i.sales_actual >= 10000 ? (i.sales_actual / 10000).toFixed(2) + 'w' : i.sales_actual }}
                    </div>
                  </div>
                </div>
              </nuxt-link>
            </div>
          </template>
          <!-- <h2 class="font-medium text-[1.25rem] text-[#121212]">
            {{ $t("pages.allpointcards") }}
          </h2> -->
          <div class="lg:grid-cols-5 lg:gap-x-[4.65rem] md:grid-cols-4 sm:grid-cols-3 grid grid-cols-2 gap-4 mt-4">
            <nuxt-link
              class="flex flex-col gap-3 cursor-pointer"
              v-for="(item, key) in goodsList"
              :key="key"
              :to="localePath(`/product/${item.code}`)"
            >
              <div class="w-full rounded-[0.75rem] bgg p-1">
                <div class="rounded-[0.75rem] aspect-[6/8] size-full relative overflow-hidden border">
                  <img
                    class="size-full object-cover"
                    :src="$globalFn.imgPrefixUrl(item.image || '', 'goods_thumb_3_4')"
                    :title="item.goods_name || 'Card product'"
                    :alt="item.goods_name || 'Card image'"
                  />
                  <img src="~/assets/img/bg-white.png" class="absolute top-2 inset-1/3 z-10 w-1/3 h-auto" alt="" />
                </div>
              </div>
              <div class="flex flex-col">
                <h3 class="font-medium text-[0.75rem] text-[#121212] line-clamp-2">
                  {{ item?.goods_name }}
                </h3>
                <p class="font-normal text-[0.75rem] text-[#666666]">
                  {{ item?.region?.name || '' }}
                </p>
                <!-- <div class="font-medium text-[0.75rem] text-[#666666]">
                  {{ $t("formItem.sale") }}
                  {{
                    item.sales_actual >= 10000
                      ? (item.sales_actual / 10000).toFixed(2) + "w"
                      : item.sales_actual
                  }}
                </div> -->
              </div>
            </nuxt-link>
          </div>
          <no-data v-if="recommendedlist.length == 0" :loading="loading"></no-data>
          <Paging :total="total" :page.sync="page" :limit.sync="size" @change="handlePageChange" :current-query="$route.query"> </Paging>
          <div></div>
        </div>
      </div>
    </div>
    <LazyH5Dialog :showDialog="showDialog" :title="$t('pages.classification')">
      <LazyClassifyCard :showActive="false" :classify="classify" @targetClassify="changeTab" />
    </LazyH5Dialog>
  </div>
</template>
<script>
  export default {
    layout: 'newsHome',
    name: 'cardList',
    head() {
      return {
        title: this.goods_category.seo_title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.goods_category.seo_description
          }
        ]
      }
    },
    data() {
      return {
        page: 1, // 当前页码
        size: 20, // 每页显示数量
        loading: true, // 加载状态
        goodsList: [], // 商品列表数据
        showDialog: false, // 移动端分类弹窗显示状态
        total: 0 // 商品总数
      }
    },
    async asyncData({ app: { $axios }, query }) {
      // 并发请求所有数据
      const [{ total, data: goodsList }, classify, recommendedlist, goods_category] = await Promise.all([
        $axios.get('/api/goods/index', {
          params: {
            type: 1,
            page: query.page || 1,
            limit: 20,
            paginate: 1,
            is_not_hot: 1
          }
        }),
        $axios.get('/api/goods_category/index', { params: { type: 1 } }),
        $axios.get('/api/goods/index', {
          params: {
            type: 1,
            is_hot: 1,
            page: 1,
            limit: 6
          }
        }),
        $axios.get('/api/goods_category/read', {
          params: {
            code: 'cards'
          }
        })
      ])

      return {
        goods_category,
        total,
        classify,
        recommendedlist,
        goodsList,
        loading: false,
        page: query.page || 1
      }
    },
    created() {},
    methods: {
      // 页码变化处理
      async handlePageChange({ page, currentQuery }) {
        this.loading = true
        this.page = currentQuery || page
        const newQuery = { ...this.$route.query, page: page }
        const newPath = this.$route.path + '?' + new URLSearchParams(newQuery).toString()
        window.history.replaceState({}, '', newPath)
        await this.getGoodsList()
      },
      // 获取商品列表
      async getGoodsList() {
        try {
          const { data, total } = await this.$axios.get('/api/goods/index', {
            params: {
              type: 1,
              page: this.page,
              limit: this.size,
              paginate: 1,
              is_not_hot: 1
            }
          })
          this.goodsList = data
          this.total = total
        } finally {
          this.loading = false
        }
      },
      // 切换分类
      changeTab({ code, id }) {
        this.$router.push({
          path: this.localePath(`/cards/platform/${code}/${id}`)
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .s {
    background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  }
  .bgg {
    background: linear-gradient(180deg, #fff 50%, #e6e6e6 100%);
    border-radius: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
